<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:bm="http://localhost:8080/customTags">

    <rich:popupPanel id="editCategoryPanel" autosized="true" width="450" modal="true">
        <f:facet name="header">
            <h:outputText value="Add new Category" />
        </f:facet>

        <f:facet name="controls">
            <h:outputLink value="#" onclick="#{rich:component('editCategoryPanel')}.hide(); return false;">
                <h:graphicImage value="/images/modal/close.png" id="hidelink_edit_category" styleClass="hidelink" style="border:0" />
            </h:outputLink>
        </f:facet>
            <h:form id="EditCategoryForm">
                <h:panelGrid columns="1" id="categoryDetail">
                    <a4j:outputPanel ajaxRendered="true">
                        <h:panelGrid columns="3" id="grid">
                            <h:inputHidden id="id" value="#{categoryController.category.id}" />
                            <h:outputText value="Name" />
                            <h:inputText id="name" value="#{categoryController.category.name}" />
                            <rich:message for="name" style="color:red" />
                            <h:outputText id="description" value="Description" />
                            <h:inputText value="#{categoryController.category.description}" />
                            <h:message for="description" style="color:red" />
                            <h:outputText value="Parent Category" />
                            <h:selectOneMenu id="parentCategory"
                                             value="#{categoryController.category.parent}"
                                             label="Default Category">
                                <f:selectItem itemLabel="Parent Category"/>
                                <f:selectItems value="#{categories.list}" />
                            </h:selectOneMenu>
                            <h:message for="parentCategory" style="color:red" />
                        </h:panelGrid>
                    </a4j:outputPanel>
                    <a4j:commandButton value="Save" action="#{categoryController.add}"
                                       reRender="name,description,parentCategory"
                                       oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('editCategoryPanel')}.hide();" />
                </h:panelGrid>
            </h:form>
    </rich:popupPanel>
</ui:composition>